<template>
  <view class="help-center-container">
    <dl v-for="cate in categoryList" :key="cate.id" class="help-modules">
      <td class="help-main-title">{{ cate.name }}</td>
      <dd
        v-for="item in cate.articles"
        :key="item.article_id"
        class="help-second-title"
        @click="helpCenterDetail(item.article_id, item.article_name)"
      >
        {{ item.article_name }}
      </dd>
    </dl>
  </view>
</template>

<script>
import * as API_Article from "@/api/article.js";
export default {
  data() {
    return {
      categoryList: [],
    };
  },
  onLoad() {
    //进入页面就调接口获取分类列表
    this.helpCenterCategoryList();
  },
  methods: {
    //帮助中心一级标题
    helpCenterCategoryList() {
      API_Article.getArticleCategory("HELP").then((response) => {
        let { children } = response;
        this.categoryList = children;
      });
    },
    //帮助中心二级标题
    helpCenterDetail(id, title) {
      uni.navigateTo({
        url:
          "/mine-module/help-center-details?help_id=" +
          id +
          "&details_title=" +
          title,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.help-center-container {
  .help-modules {
    box-sizing: border-box;
    width: 95%;
    margin: 3% auto;
    padding: 0 15rpx;
    background-color: #ffffff;
    border-radius: 15rpx;
    .help-main-title {
      height: 60rpx;
      line-height: 60rpx;
      padding: 10rpx 0;
      color: #313131;
      font-size: 30rpx;
      font-weight: bold;
    }
    .help-second-title {
      height: 60rpx;
      line-height: 60rpx;
      padding: 10rpx 0;
      color: #959595;
      font-size: 25rpx;
      border-top: 1rpx solid #f4f4f4;
    }
  }
}
</style>
